<template>
	<el-dialog
		v-if="dialogVisible"
		width="1000px"
		title="牌局回顾"
		:visible="dialogVisible"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
		center
	>
		<slot name="lastNextButton"></slot>
		<el-card
			v-loading="dialogLoading"
			element-loading-spinner="el-icon-loading"
		>
			<div class="gameContent">
				<!-- 牌局回放标题信息 -->
				<ReplayInfo
					:isShowSeatCount="stepShowType.isShowSeatCount"
					:replayInfo="replayDetail.info"
					:handStatus="replayDetail.handStatus"
				></ReplayInfo>

				<div class="gameListContent">
					<!-- 牌谱详情(牌谱) -->
					<ReplayStep
						:isShowStepIcon="stepShowType.isShowStepIcon"
						:isShowPublicCards="stepShowType.isShowPublicCards"
						:isShowJoinCount="stepShowType.isShowJoinCount"
						:topInfo="replayDetail.topInfo"
						:bottomList="replayDetail.bottomList"
						:insurePoolDetail="replayDetail.insurePoolDetail"
					></ReplayStep>

					<div class="detailProcess">
						<template v-if="showDetailOrList === 'detail'">
							<!-- 跳转回放步骤 -->
							<template v-if="replayDetail.topInfo">
								<el-link
									@click="showReplayListView"
									class="showDetailContent"
								>
									详细过程
								</el-link>
							</template>
						</template>
						<!-- 数据获取结果 -->
						{{ replayReqResult || '' }}
					</div>

					<!-- 回放步骤 -->
					<template v-if="showDetailOrList === 'list'">
						<template v-if="replayList.length > 0">
							<div class="detailProcess">
								详细过程
							</div>
						</template>
						<!-- 详细过程展示(Pre,Flop,Turn,River,ShowDown) -->
						<ReplayStep
							v-for="(item, index) in replayList"
							:key="index + Math.random()"
							:isShowStepIcon="stepShowType.isShowStepIcon"
							:isShowPublicCards="item.topInfo.isShowPublicCards"
							:isShowJoinCount="item.topInfo.isShowJoinCount"
							:topInfo="item.topInfo"
							:bottomList="item.bottomList"
							:insurePoolDetail="item.insurePoolDetail"
						></ReplayStep>
					</template>
				</div>
			</div>
		</el-card>
	</el-dialog>
</template>

<script>
import '@/styles/replay.scss'
import ReplayInfo from './components/ReplayInfo'
import ReplayStep from './components/ReplayStep'

export default {
	name: 'GameReplay',
	components: {
		ReplayInfo,
		ReplayStep
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		dialogLoading: {
			type: Boolean,
			default: false
		},
		// 回放详情
		replayDetail: {
			type: Object,
			default: () => {}
		},
		// 回放详情列表
		replayList: {
			type: Array,
			default: () => {}
		},
		// 回放接口数据请求结果
		replayReqResult: {
			type: String,
			default: undefined
		}
	},
	data() {
		return {
			showDetailOrList: 'list'
		}
	},
	computed: {
		stepShowType() {
			// 详情不展示加入人数，只有列表才展示加入人数
			if (this.showDetailOrList === 'detail') {
				return {
					isShowSeatCount: false,
					isShowStepIcon: false,
					isShowPublicCards: false,
					isShowJoinCount: false
				}
			} else {
				return {
					isShowSeatCount: true,
					isShowStepIcon: true,
					isShowPublicCards: true,
					isShowJoinCount: true
				}
			}
		}
	},
	watch: {},
	created() {},
	methods: {
		showReplayListView() {
			// 获取牌谱详情列表数据
			this.showDetailOrList = 'list'
		},
		// 关闭弹窗
		handleClose() {
			this.$emit('update:dialogVisible', false)
			// 默认显示detail
			this.showDetailOrList = 'list'
		}
	}
}
</script>
